<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{admin/layout/parent}">
<head>
	<title id="pageTitle">菜单管理</title>
	<link th:href="@{/assets/plugins/nestable/jquery.nestable.css}" rel="stylesheet" />
</head>
<body>

<th:block layout:fragment="page-content">
<div class="row">
	<div class="col-sm-6">
		<div class="card-box">
			<h4 class="m-t-0 header-title">
				<b>微信菜单</b>
			</h4>
			<p class="text-muted m-b-30 font-13">微信公众平台数据，但同步后才生效</p>
			<div class="custom-dd dd">
				<ol class="dd-list">
					<th:block th:each="button : ${remoteButtons}">
						<li class="dd-item" th:attr="data-type=${button.type},data-key=${button.key},data-url=${button.url},data-mediaId=${button.mediaId},data-name=${button.name}">
							<div class="dd-handle">
								<span class="name-text">[(${button.name})]</span>
								<div class="pull-right">
									<a href="#" class="menu-search" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-search"></i></a>
								</div>
							</div>
							<th:block th:if="${#lists.size(button.subButtons)} > 0">
								<ol class="dd-list">
									<th:block th:each="subButton : ${button.subButtons}">
										<li class="dd-item" th:attr="data-type=${subButton.type},data-key=${subButton.key},data-url=${subButton.url},data-mediaId=${subButton.mediaId},data-name=${subButton.name}">
											<div class="dd-handle">
												<span class="name-text">[(${subButton.name})]</span>
												<div class="pull-right">
													<a href="#" class="menu-search" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-search"></i></a>
												</div>
											</div>
										</li>
									</th:block>
								</ol>
							</th:block>
						</li>
					</th:block>
				</ol>
			</div>
			<hr>
			<div class="text-right">
				<button id="btn-delete-menu" class="ladda-button btn btn-danger" type="button"  data-style="expand-left"><i class="fa fa-trash-o"></i> 删除菜单</button>
				<button id="btn-async-menu" class="ladda-button btn btn-primary" type="button"  data-style="expand-left"><i class="fa fa-refresh"></i> 同步到本地</button>
			</div>
		</div>
	</div>
	
	<div class="col-sm-6">
		<div class="card-box">
			<h4 class="m-t-0 header-title">
				<b>微信菜单</b>
			</h4>
			<p class="text-muted m-b-30 font-13">本地数据库数据</p>
			<div class="custom-dd-empty dd" id="menu">
				<ol class="dd-list">
					<th:block th:each="button : ${localButtons}">
						<li class="dd-item dd3-item" th:attr="data-type=${button.type},data-key=${button.key},data-url=${button.url},data-mediaId=${button.mediaId},data-name=${button.name}">
							<div class="dd-handle dd3-handle"></div>
							<div class="dd3-content" >
								<span class="name-text">[(${button.name})]</span>
								<div class="pull-right">
									<a href="#" class="menu-search" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-search"></i></a>
									<a href="#" class="menu-add" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-plus"></i></a>
									<a href="#" class="menu-edit" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-pencil"></i></a>
									<a href="#" class="menu-delete"><i class="fa fa-trash-o"></i></a>
								</div>
							</div>
							<th:block th:if="${#lists.size(button.subButtons)} > 0">
								<ol class="dd-list">
									<th:block th:each="subButton : ${button.subButtons}">
										<li class="dd-item dd3-item" th:attr="data-type=${subButton.type},data-key=${subButton.key},data-url=${subButton.url},data-mediaId=${subButton.mediaId},data-name=${subButton.name}">
											<div class="dd-handle dd3-handle"></div>
											<div class="dd3-content" >
												<span class="name-text">[(${subButton.name})]</span>
												<div class="pull-right">
													<a href="#" class="menu-search" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-search"></i></a>
													<a href="#" class="menu-add" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-plus"></i></a>
													<a href="#" class="menu-edit" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-pencil"></i></a>
													<a href="#" class="menu-delete"><i class="fa fa-trash-o"></i></a>
												</div>
											</div>
										</li>
									</th:block>
								</ol>
							</th:block>
						</li>
					</th:block>
				</ol>
			</div>
			<hr>
			<div class="text-right">
				<button class="btn btn-success waves-effect waves-light" type="button" data-toggle="modal" data-target="#menu-edit-modal"><i class="fa fa-plus"></i> 添加一级节点</button>
				<button id="btn-save" class="ladda-button btn btn-primary waves-effect waves-light" type="button" data-style="expand-left"><i class="fa fa-save"></i> 提交</button>
				<button id="btn-publish" class="ladda-button btn btn-default waves-effect waves-light" type="button" data-style="expand-left"><i class="fa fa-mail-forward"></i> 发布</button>
			</div>
		</div>
	</div>
</div>

<div id="menu-edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="menu-edit-modal-title" aria-hidden="true" style="display: none;">
    <div class="modal-dialog"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                <h4 class="modal-title" id="menu-edit-modal-title">修改</h4> 
            </div> 
            <div class="modal-body"> 
                <div class="row"> 
                    <div class="col-md-12"> 
                        <div class="form-group"> 
                            <label class="control-label">名称</label> 
                            <input type="text" class="form-control" name="name" placeholder="名称"> 
                        </div> 
                    </div>
                    <div class="col-md-12"> 
                        <div class="form-group"> 
                            <label class="control-label">类型</label> 
                            <select class="form-control" name="type">
                            	<option value="">无</option>
                            	<option value="click">按钮</option>
                            	<option value="view">页面</option>
                            </select>
                        </div> 
                    </div> 
                    <div class="col-md-12"> 
                        <div class="form-group"> 
                            <label class="control-label">KEY</label> 
                            <input type="text" class="form-control" name="key" placeholder="KEY"> 
                        </div> 
                    </div>
                    <div class="col-md-12"> 
                        <div class="form-group"> 
                            <label class="control-label">URL</label> 
                            <input type="text" class="form-control" name="url" placeholder="URL"> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <div class="modal-footer"> 
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">关闭</button>
                <button id="menu-edit-modal-save" type="button" class="btn btn-primary waves-effect waves-light">确定</button>
            </div>
        </div> 
    </div>
</div>

</th:block>
<th:block layout:fragment="page-plugin">
	<script th:src="@{/assets/plugins/nestable/jquery.nestable.js}"></script>
</th:block>
<th:block layout:fragment="page-js">
<script th:src="@{/page/admin/mp/menu.js}" type="text/javascript"></script>
</th:block>
</body>
</html>
